<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col v-hasRole="['admin']" :sm="24" :lg="24">
        <InfoColumn />
      </el-col>
      <el-col v-if="isCommon" :sm="24" :lg="24">
        <IndexPrevate />
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import IndexPrevate from './business/infoColumn/index-prevate'
  import InfoColumn from './business/infoColumn/index'

  export default {
    name: "Index",
    components: {
      IndexPrevate,
      InfoColumn
    },
    data() {
      return {
        isCommon: false
      };
    },
    created() {
      let roles = this.$store.state.user.roles
      const permissionRoles = 'common'
      this.isCommon = roles.some(role => {
        return permissionRoles.includes(role)
      })
    },
    methods: {
    }
  };
</script>

<style scoped lang="scss">
  .home {
    blockquote {
      padding: 10px 20px;
      margin: 0 0 20px;
      font-size: 17.5px;
      border-left: 5px solid #eee;
    }

    hr {
      margin-top: 20px;
      margin-bottom: 20px;
      border: 0;
      border-top: 1px solid #eee;
    }

    .col-item {
      margin-bottom: 20px;
    }

    ul {
      padding: 0;
      margin: 0;
    }

    font-family: "open sans",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;
    font-size: 13px;
    color: #676a6c;
    overflow-x: hidden;

    ul {
      list-style-type: none;
    }

    h4 {
      margin-top: 0px;
    }

    h2 {
      margin-top: 10px;
      font-size: 26px;
      font-weight: 100;
    }

    p {
      margin-top: 10px;

      b {
        font-weight: 700;
      }
    }

    .update-log {
      ol {
        display: block;
        list-style-type: decimal;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0;
        margin-inline-end: 0;
        padding-inline-start: 40px;
      }
    }
  }
</style>
